<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>注塑车间机台巡检警告列表</title>
		    <meta  charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
		<!-- Link Swiper's CSS -->
		<link rel="stylesheet" href="./css/swiper.css">
		<link rel="stylesheet" href="./css/iconfont.css">
	</head>
	<body>
			<div class="body_div" style="font-weight: bold;">
		    <div class="content" style="margin-top: 5px;">
		        <div class="box1">
		          &nbsp;<span class="iconfont_yellow">&#xe6a4;</span>预警
		          &nbsp;<span class="iconfont_orange">&#xe6a4;</span>报警
				  &nbsp;<span class="iconfont_red">&#xe6a4;</span>超期
				</div>
		        <div class="box3" id="clock"></div>
		        <div class="box2">注塑车间机台巡检预警看板</div>
				<video id="video" style="height: 0;" src="http://192.168.20.5:9988/mp3/jinggao.mp3" autoplay="autoplay" loop muted="muted"></video>
		<!-- 		<button id="btn" onclick="startMp3()" >播放声音</button>
				<button id="btn" onclick="stopMp3()" >暂停声音</button> -->
		    </div>
		    <div class="swiperbox" style="margin-top: 5px;">
		        <!--加上数据的长度判断，是为了保证异步加载完以后进行初始化swiper-->
				<div class="swiper-container">
					<table style="border:1;cellspacing:0;font-size: 18px;width:100%;">
					    <tr style="color:#FFFFFF;height: 50px;text-align: center;">
						  <td style="width:5%;background-color: #010A97;">序号</td> 
					      <td style="width:10%;background-color: #010A97;">机台名称</td>  
					      <td style="width:12%;background-color: #010A97;">模具名称</td>
						  <td style="width:5%;background-color: #010A97;">班次</td>
					      <td style="width:10%;background-color: #010A97;">生产状态</td>
					      <td style="width:29%;background-color: #010A97;">巡检周期</td>
					      <td style="width:10%;background-color: #010A97;">剩余时间</td>
					      <td style="width:10%;background-color: #010A97;">超出时间</td>
						  <td style="width:6%;background-color: #010A97;">警示灯</td>
					    </tr>
					  </table>
					<div class="swiper-wrapper" id="swiper-div">
					</div>
				</div>
		    </div>
		  </div> 
		  <!-- Swiper -->
		  <!-- Swiper JS -->
		  <!-- <script src="./js/swiper.min.js"></script> -->
		  <script src="./js/jquery-3.4.1.min.js"></script>
		  <!-- Initialize Swiper -->
		  <script>
			var mswiper;
			var timer;
			getRunData();
			// let iframe = document.createElement('iframe');
			// iframe.src="./mp3/jinggao.mp3";
			// document.body.appendChild(iframe);
			// var myAudio = document.getElementById("myAudio");
			const videoDom = document.getElementById('video');
			//	点击之后允许播放声音
			function startMp3(){
				videoDom.muted = false;
			}
			function stopMp3(){
				videoDom.muted = true;
			}
			//异步获取数据  http://192.168.20.7:8090  
			//异步获取数据  http://192.168.20.5:8090  
			function getRunData(){
				var machineRunHtml = "";
				$("#swiper-div").html("");
				$.ajax({
					type: "get",
					url: "http://192.168.20.5:8190/mes-boot/openapi/report/ReportInterface/getQcCheckRunData?token=a78ad9a9ae446703ac942cb7b3d174",
					success: function (obj) {
						// console.log(obj.result.mlist); "+(item_d.qcLightStatus==null?'-':"<span class='iconfont_yellow'>&#xe6a4;</span>")+"</td>""+(item_d.hmStatus==null?'-':"<span class='iconfont_yellow'>&#xe6a4;</span>")+"</td>";
						var marry = obj.result;
						console.log(marry);
						machineRunHtml = "";
						if(marry != null && marry != 'undefined' && marry.length > 0 ){
							machineRunHtml += "<table style='border:1;cellspacing:0;font-size: 18px;width:100%;'>";
							$.each(marry, function (i, item_d) {
								machineRunHtml += "<tr style='color:#FFFFFF;height: 50px;text-align: center;'>";
									if(item_d.warnValue =="1"){
										machineRunHtml += "<td style='width:5%;color:yellow;'>"+(i+1)+"</td>";
										machineRunHtml += "<td style='width:10%;color:yellow;'>"+item_d.imName+"</td>";
										machineRunHtml += "<td style='width:12%;color:yellow;'>"+(item_d.mouldCode==null?'-':item_d.mouldCode)+"</td>";
										machineRunHtml += "<td style='width:5%;color:yellow;'>"+(item_d.proShift==null?'-':(item_d.proShift=='1'?'白班':'夜班'))+"</td>";
										machineRunHtml += "<td style='width:10%;color:yellow;'>"+(item_d.proStatus==null?'-':(item_d.proStatus=='4'?'生产中':(item_d.proStatus=='6'?'暂停':'生产完毕')))+"</td>";
										machineRunHtml += "<td style='width:29%;color:yellow;'>"+(item_d.cycleTime)+"</td>";
										machineRunHtml += "<td style='width:10%;color:yellow;'>"+(item_d.syTime+'分钟')+"</td>";
										machineRunHtml += "<td style='width:10%;color:yellow;'>"+(item_d.overTime+'分钟')+"</td>";
										machineRunHtml += "<td style='width:6%;color:yellow;'><span class='iconfont_yellow'>&#xe6a4;</span></td>";
									}else if(item_d.warnValue =="2"){
										machineRunHtml += "<td style='width:5%;color:orange;'>"+(i+1)+"</td>";
										machineRunHtml += "<td style='width:10%;color:orange;'>"+item_d.imName+"</td>";
										machineRunHtml += "<td style='width:12%;color:orange;'>"+(item_d.mouldCode==null?'-':item_d.mouldCode)+"</td>";
										machineRunHtml += "<td style='width:5%;color:orange;'>"+(item_d.proShift==null?'-':(item_d.proShift=='1'?'白班':'夜班'))+"</td>";
										machineRunHtml += "<td style='width:10%;color:orange;'>"+(item_d.proStatus==null?'-':(item_d.proStatus=='4'?'生产中':(item_d.proStatus=='6'?'暂停':'生产完毕')))+"</td>";
										machineRunHtml += "<td style='width:29%;color:orange;'>"+(item_d.cycleTime)+"</td>";
										machineRunHtml += "<td style='width:10%;color:orange;'>"+(item_d.syTime+'分钟')+"</td>";
										machineRunHtml += "<td style='width:10%;color:orange;'>"+(item_d.overTime+'分钟')+"</td>";
										machineRunHtml += "<td style='width:6%;'><span class='iconfont_orange'>&#xe6a4;</span></td>";
									}else if(item_d.warnValue =="3" || item_d.isOpenInput == 1){
										machineRunHtml += "<td style='width:5%;color:red;'>"+(i+1)+"</td>";
										machineRunHtml += "<td style='width:10%;color:red;'>"+item_d.imName+"</td>";
										machineRunHtml += "<td style='width:12%;color:red;'>"+(item_d.mouldCode==null?'-':item_d.mouldCode)+"</td>";
										machineRunHtml += "<td style='width:5%;color:red;'>"+(item_d.proShift==null?'-':(item_d.proShift=='1'?'白班':'夜班'))+"</td>";
										machineRunHtml += "<td style='width:10%;color:red;'>"+(item_d.proStatus==null?'-':(item_d.proStatus=='4'?'生产中':(item_d.proStatus=='6'?'暂停':'生产完毕')))+"</td>";
										machineRunHtml += "<td style='width:29%;color:red;'>"+(item_d.cycleTime)+"</td>";
										machineRunHtml += "<td style='width:10%;color:red;'>"+(item_d.syTime+'分钟')+"</td>";
										machineRunHtml += "<td style='width:10%;color:red;'>"+(item_d.overTime+'分钟')+"</td>";
										machineRunHtml += "<td style='width:6%;color:red;'><span class='iconfont_red'>&#xe6a4;</span></td>";
									}
								machineRunHtml += "</tr>";
							});
							machineRunHtml += "</table>";
							startMp3();
						}else{
							stopMp3();
							machineRunHtml += "<table style='border:1;cellspacing:0;font-size: 18px;width:100%;'>";
							machineRunHtml += "<tr style='color:#FFFFFF;height: 50px;text-align: center;'>";
							machineRunHtml += "<td style='width:100%;'><span>暂无需要巡检的机台</span></td>";
							machineRunHtml += "</tr></table>";
						}
						$("#swiper-div").append(machineRunHtml);
					}
				});
			}
			setInterval(function () {
			   getRunData();
			}, 10000);
			clearInterval(timer);
			$(document).ready(function(){
				//从服务器获取时间  
				var date;
				$.ajax({
					type: "get",
					url: "http://192.168.20.5:8190/mes-boot/openapi/report/ReportInterface/getNowDate?token=a78ad9a9ae446703ac942cb7b3d174",
					success: function (obj) {
						date = new Date(obj);
						timer  = setInterval(function(){
						    $("#clock").html("");
							var month,dates,hours,min,seconds;
							month=(date.getMonth()+1);
							dates=date.getDate();
							hours=date.getHours();
							min=date.getMinutes();
							seconds=date.getSeconds();
							var second_int = date.getSeconds();
							if(month<10){
								month="0"+month;
							}
							if(dates<10){
								dates="0"+dates;
							}
							if(hours<10){
								hours="0"+hours;
							}
							if(min<10){
								min="0"+min;
							}
							if(seconds<10){
								seconds="0"+seconds;
							}
							week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
							var clocks=date.getFullYear()+"年"+month+"月"+dates+"日"+hours+":"+min+":"+seconds+" "+week[date.getDay()];
							// date = date.setSeconds(second_int+1);
							date.setSeconds(date.getSeconds() + 1);
							$("#clock").append(clocks);
						},1000)
					}
				});
			    
			})
		  </script>
	</body>
	<style>
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 18px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	.iconfont_green {
	  font-family: "iconfont" !important;
	  font-size: 18px;
	  font-style: normal;
	  color:lawngreen;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	.iconfont_red {
	  font-family: "iconfont" !important;
	  font-size: 18px;
	  font-style: normal;
	  color:red;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	.iconfont_yellow {
	  font-family: "iconfont" !important;
	  font-size: 18px;
	  font-style: normal;
	  color: yellow;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	.iconfont_orange {
	  font-family: "iconfont" !important;
	  font-size: 18px;
	  font-style: normal;
	  color: orange;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	body {
	      overflow: hidden;  /*清除浮动*/
	      background-color: #171C36;
	}
	  .box1 {
	      width: 35%;
	      height: 40px;
	      background-color: #171C36;
	      float: left;
	      color: white;
	      text-align: left;
	      line-height: 40px;
	      font-size: 18px;
	  }
	  .box2 {
	      width: 35%;
	      height: 40px;
	      background-color: #171C36;
	      margin: 0 auto;
	      position: relative;
	      color: white;
	      text-align: center;
	      line-height: 40px;
	      font-size: 26px;
	  }
	  .box3 {
	      width: 30%;
	      height: 40px;
	      background-color: #171C36;
	      float: right;
	      color: white;
	      text-align: right;
	      line-height: 40px;
	      font-size: 18px;
	  }
	  
	
	  .body_div {
	    background-color: #171C36;
	    // min-height: 100vh;
	    &::before {
	      content: ' ';
	      position: fixed;
	      z-index: -1;
	      top: 0;
	      right: 0;
	      bottom: 0;
	      left: 0;
	      background-color: #171C36;
	    }
	  }
	  :deep(.jeecg-basic-table .ant-table-wrapper) {
	    background-color: #171C36;
	  }
	  .ant-table-tbody > tr > td{
	    background-color: #171C36;
	  }
	  :deep(.ant-table-small .ant-table-thead > tr > th){
	    background-color: #020A86;
	    color:white;
	    font-size: 30px;
	  }
	  :deep(.ant-table.ant-table-small .ant-table-tbody > tr > td){
	    background-color: #171C36;
	    color:white;
	    font-size: 30px;
	  }
	  table, td{
	      border: 1px solid #FFFFFF;
	      border-collapse: collapse;
	  }
	  :deep(.swiper-pagination-bullet){
	    border: 1px solid #FFFFFF;
	    height: 48px;
	    background-color: #9E9B9B;
	    width: 48px;
	  }
	  :deep(.swiper-wrapper){
	    margin-bottom: 100px;
	  }
	</style>
</html>
